<template>
  <div id="map"></div>
</template>

<script setup>
import { createMap } from '@/utils/map/mapInit';
import { onMounted } from 'vue';
import { useMapStore } from '@/stores/mapStore.js'
import { useSetInitViewStore } from '@/stores/setInitView';

const mapStore = useMapStore()
const setInitViewStore = useSetInitViewStore()

onMounted(() => {
  // 使用默认配置初始化
  const map = createMap();

  mapStore.setMap(map)  // 将地图实例存储到 store 中

  // 记录初始状态
  let view = map.getView()
  setInitViewStore.view = map.getView()
  setInitViewStore.zoom = view.getZoom()
  setInitViewStore.center = view.getCenter()
  setInitViewStore.rotation = view.getRotation()

});
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>